<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="keywords" content="">
	<meta name="author" content="">
	<meta name="robots" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- PAGE TITLE HERE -->
	<title>职位详情</title>

	<link href="/css/nice-select.css" rel="stylesheet">
	<link href="/css/jquery.dataTables.min.css" rel="stylesheet">

	<!-- Style css -->
	<link href="/css/style.css" rel="stylesheet">

</head>
<body>
<div class="container-fluid">
	<div class="d-flex align-items-center mb-4 flex-wrap mt-4">
		<h4 class="fs-20 font-w600  me-auto">职位详情</h4>
		<div>
			<a href="/user/new-job" class="btn btn-primary me-3 btn-sm" th:if="${session.loginType == 2}"><i class="fas fa-plus me-2" ></i>发布职位</a>
			<a href="javascript:void(0);" class="btn btn-secondary btn-sm me-3"> <i class="fas fa-envelope"></i></a>
			<a href="javascript:void(0);" class="btn btn-secondary btn-sm me-3"><i class="fas fa-phone-alt"></i></a>
			<a href="javascript:void(0);" class="btn btn-secondary btn-sm"><i class="fas fa-info"></i></a>

		</div>
	</div>
	<div class="row">
		<div class="col-xl-3 col-xxl-4">
			<div class="row">
				<div class="col-xl-12">
					<div class="card">
						<div class="card-header border-0 pb-0">
							<h4 class="fs-20 mb-0">概览</h4>
						</div>
						<div class="card-body pt-4">
							<!-- 添加空值判断的职位基本信息 -->
							<div class="mb-3 d-flex">
								<h5 class="mb-1 fs-14 custom-label">职位名称：</h5>
								<span th:text="${job?.title ?: '暂无信息'}"></span>
							</div>
							<div class="mb-3 d-flex">
								<h5 class="mb-1 fs-14 custom-label">工作类型：</h5>
								<span th:text="${job?.jobType ?: '暂无信息'}"></span>
							</div>
							<div class="mb-3 d-flex">
								<h5 class="mb-1 fs-14 custom-label">薪资范围：</h5>
								<span th:text="${job?.salaryRange ?: '暂无信息'}"></span>
							</div>
							<div class="mb-3 d-flex">
								<h5 class="mb-1 fs-14 custom-label">教育要求：</h5>
								<span th:text="${job?.education ?: '暂无信息'}"></span>
							</div>
							<div class="mb-3 d-flex">
								<h5 class="mb-1 fs-14 custom-label">发布时间：</h5>
								<span th:if="${job?.postTime != null}"
									  th:text="${#temporals.format(job.postTime, 'yyyy-MM-dd HH:mm')}"></span>
								<span th:unless="${job?.postTime != null}">暂无信息</span>
							</div>
							<div class="mb-3 d-flex">
								<h5 class="mb-1 fs-14 custom-label">截止时间：</h5>
								<span th:if="${job?.expirationTime != null}"
									  th:text="${#temporals.format(job.expirationTime, 'yyyy-MM-dd HH:mm')}"></span>
								<span th:unless="${job?.expirationTime != null}">暂无信息</span>
							</div>
							<div class="mb-3 d-flex">
								<h5 class="mb-1 fs-14 custom-label">状态：</h5>
								<span th:text="${job?.status == 1 ? '启用' : (job?.status == 0 ? '关闭' : '状态未知')}"></span>
							</div>
						</div>
						<div class="card-footer border-0 pt-0 ">
							<div class="d-flex justify-content-between flex-wrap">
								<a href="javascript:void(0);" class="btn btn-primary btn-sm mb-3 apply-btn">
									<i class="fas fa-check me-2"></i>立即申请
								</a>
								<a href="javascript:void(0);" class="btn btn-outline-primary btn-sm mb-3 contact-btn">
									<i class="fas fa-phone-volume me-2"></i>联系企业
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-9 col-xxl-8">
			<div class="row">
				<div class="col-xl-12">
					<div class="card">
						<div class="card-header d-block">
							<!-- 添加空值判断的职位标题 -->
							<h4 class="fs-20 d-block" th:text="${job?.title ?: '职位标题'}"></h4>
							<div class="d-block">
								<span class="me-2">
									<i class="fas fa-briefcase me-2"></i>
									<!-- 使用安全导航操作符处理嵌套对象 -->
									<span th:if="${job?.user?.userType}">
										<span th:text="${job?.user?.company?.companyName ?: '未知公司'}"></span>
									</span>
									<span th:unless="${job?.user?.userType}">
										<span th:text="${job?.user?.info?.realName ?: '未知用户'}"></span>
									</span>
								</span>
								<span class="me-2">
									<i class="fas fa-map-marker-alt me-2"></i>
									<span th:text="${job?.location ?: '地点未知'}"></span>
								</span>
							</div>
						</div>
						<div class="card-body">
							<h4 class="fs-20 mb-3">职位描述</h4>
							<div class="ms-4" th:utext="${job?.description ?: '暂无职位描述'}"></div>
							<hr>

							<h4 class="fs-20 mb-3">职位详情</h4>
							<div class="row mb-3">
								<div class="col-xl-6">
									<div class="ms-4">
										<p class="font-w500 mb-3">
											<span class="custom-label">工作类型：</span>
											<span th:text="${job?.jobType ?: '暂无信息'}"></span>
										</p>
										<p class="font-w500 mb-3">
											<span class="custom-label">薪资范围：</span>
											<span th:text="${job?.salaryRange ?: '暂无信息'}"></span>
										</p>
										<p class="font-w500 mb-3">
											<span class="custom-label">教育要求：</span>
											<span th:text="${job?.education ?: '暂无信息'}"></span>
										</p>
									</div>
								</div>
								<div class="col-xl-6">
									<div class="ms-4">
										<p class="font-w500 mb-3">
											<span class="custom-label">工作地点：</span>
											<span th:text="${job?.location ?: '暂无信息'}"></span>
										</p>
										<p class="font-w500 mb-3">
											<span class="custom-label">招聘人数：</span>
											<span th:text="${job?.count != null} ? ${job.count} : '暂无信息'"></span>
										</p>
										<p class="font-w500 mb-3">
											<span class="custom-label">截止日期：</span>
											<span th:if="${job?.expirationTime != null}"
												  th:text="${#temporals.format(job.expirationTime, 'yyyy-MM-dd')}"></span>
											<span th:unless="${job?.expirationTime != null}">暂无信息</span>
										</p>
									</div>
								</div>
							</div>

							<hr>

							<h4 class="fs-20 mb-3">发布者信息</h4>
							<div class="row mb-3">
								<div class="col-xl-12">
									<div th:if="${job?.user?.userType}">
										<div class="ms-4">
											<p class="font-w500 mb-3">
												<span class="custom-label">公司名称：</span>
												<span th:text="${job?.user?.company?.companyName ?: '未知公司'}"></span>
											</p>
											<p class="font-w500 mb-3">
												<span class="custom-label">公司类型：</span>
												<span th:text="${job?.user?.company?.companyType ?: '未知类型'}"></span>
											</p>
											<p class="font-w500 mb-3">
												<span class="custom-label">公司地址：</span>
												<span th:text="${job?.user?.company?.companyAddress ?: '地址未知'}"></span>
											</p>
											<p class="font-w500 mb-3">
												<span class="custom-label">法人代表：</span>
												<span th:text="${job?.user?.company?.legalPerson ?: '未知'}"></span>
											</p>
										</div>
									</div>
									<div th:unless="${job?.user?.userType}">
										<div class="ms-4">
											<p class="font-w500 mb-3">
												<span class="custom-label">姓名：</span>
												<span th:text="${job?.user?.info?.realName ?: '未知姓名'}"></span>
											</p>
											<p class="font-w500 mb-3">
												<span class="custom-label">联系电话：</span>
												<span th:text="${job?.user?.info?.phone ?: '未知电话'}"></span>
											</p>
											<p class="font-w500 mb-3">
												<span class="custom-label">电子邮箱：</span>
												<span th:text="${job?.user?.info?.email ?: '未知邮箱'}"></span>
											</p>
										</div>
									</div>
								</div>
							</div>

							<div class="d-flex justify-content-between py-4 border-bottom border-top flex-wrap">
								<span>职位ID: #<span th:text="${job?.id ?: 'N/A'}"></span></span>
								<span>
									发布时间：<span th:if="${job?.postTime != null}"
												   th:text="${#temporals.format(job.postTime, 'yyyy-MM-dd')}"></span>
									<span th:unless="${job?.postTime != null}">未知</span>
								</span>
							</div>
						</div>
						<div class="card-footer border-0">
							<div>
								<a href="javascript:void(0);" class="btn btn-primary btn-md me-2 mb-3 apply-btn"><i class="far fa-check-circle me-2"></i>立即申请</a>
								<a href="javascript:void(0);" class="btn btn-warning btn-md me-2 mb-3"><i class="fas fa-share-alt me-2"></i>分享职位</a>
								<a href="javascript:void(0);" class="btn btn-secondary btn-md mb-3"><i class="fas fa-print me-2"></i>打印</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>


<script src="/js/global.min.js"></script>
<script src="/js/Chart.bundle.min.js"></script>
<script src="/js/jquery.nice-select.min.js"></script>

<!-- Chart piety plugin files -->
<script src="/js/jquery.dataTables.min.js"></script>
<script src="/js/datatables.init.js"></script>

<script src="/js/custom.min.js"></script>
<script src="/js/dlabnav-init.js"></script>
<script src="/js/demo.js"></script>

<script>
	//申请职位

	//分享职位

	//打印

</script>
<!-- 在页面底部添加内联JavaScript -->
<script th:inline="javascript">
	/*<![CDATA[*/
	// 获取当前职位ID和用户ID
	var jobId = [[${job?.id}]];//职位ID
	var userId = [[${session.account?.id}]]; // 从session中获取用户ID
	var jobPublisherId=[[${job?.user?.id}]];//职位发布者ID

	// 申请职位函数
	function applyJob() {
		if (!userId) {
			alert('请先登录！');
			window.location.href = '/login'; // 跳转到登录页
			return;
		}

		// 创建申请对象
		var application = {
			job: { id: jobId },
			seeker: { id: userId }
		};

		// 发送POST请求
		fetch('/api/application/add', {
			method: 'POST',
			headers: {
				'Content-Type': 'application/json'
			},
			body: JSON.stringify(application)
		})
				.then(response => response.json())
				.then(data => {
					if (data.code === 200) {
						alert('申请成功！');
					} else {
						alert('申请失败: ' + data.msg);
					}
				})
				.catch(error => {
					console.error('Error:', error);
					alert('申请过程中发生错误');
				});
	}

	// 绑定申请函数到按钮
	document.addEventListener('DOMContentLoaded', function() {
		document.querySelectorAll('.apply-btn').forEach(btn => {
			btn.addEventListener('click', applyJob);
		});
	});

	// 联系企业函数
	function contactPublisher(){
		window.location.href = '/user/chat?'+'senderId='+userId+'&receiverId='+jobPublisherId;
	}
	// 绑定联系企业函数到按钮
	document.addEventListener('DOMContentLoaded', function() {
		document.querySelectorAll('.contact-btn').forEach(btn => {
			btn.addEventListener('click', contactPublisher);
		});
	});
	/*]]>*/
</script>
</body>
</html>